<!--  -->
<template>
  <div>
    <p class="total">查询内容<span class="count">({{totals}} 条)</span></p>

    <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-immediate="false" infinite-scroll-distance="20" infinite-scroll-disabled="disabled" style="overflow:auto">
      <li class="infinite-list-item" v-for="item in data" :key="item.index" @click="listClick">
        <el-col :span="8">
          <el-image style="padding:10px;height:100px" :src="baseUrl+'/voucher'+item.url" fit="fill"></el-image>
        </el-col>
        <el-col :span="16">
          <div v-if="id>0" @click="handleDetail(item)" class="detail">
            <h4>地址:{{item.Address}}</h4>
            <p>资产状态:{{item.State}}</p>
            <p>资产编号:{{item.Num}}</p>
          </div>
          <div v-else @click="handleDetail(item)" class="detail">
            <h4>地址:{{item.address}}</h4>
            <p>资产状态:{{item.state}}</p>
            <p>资产编号:{{item.num}}</p>

          </div>
        </el-col>
      </li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getAllRoom, getAccessPagingConditions } from "@/api/map";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      count: 10,
      page: 2,
      totals: this.searchData.total,
      data: this.searchData.rows,
      id: this.zoomId,
      loading: false,
      baseUrl: "",
      checkdata: [],
      conditionData: {
        page: 1,
        address: ""
      }
    };
  },
  props: {
    checkList: Object,
    searchData: {
      type: Object,
      default: {}
    },
    zoomId: {
      type: Number,
      default: 0
    },
    condition: {
      type: Object,
      default: {}
    }
  },
  //监听属性 类似于data概念
  computed: {
    noMore() {
      return this.count > this.totals;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  //监控data中的数据变化
  watch: {
    checkList(list) {
      console.log("查询后变化的数据", list);
      // this.data = list.rows;
      // this.totals = list.total;
      // this.checkdata = list.rows;
    },
    searchData: {
      handler(data, oldValue) {
        console.log("点位点击时的数据", data);
        this.$nextTick(function() {
          this.data = data.rows;
          this.totals = data.total;
        });
      },
      deep: true
    },
    condition: {
      handler(data, oldValue) {
        this.conditionData = data;
        this.conditionData.page = 1;
        this.id = 0;
        getAccessPagingConditions(this.conditionData).then(res => {
          console.log("查询list", res.rows);
          this.data = res.rows;
          this.page = 1;
          this.count = res.rows.length;
          this.totals = res.total;
        });
      },
      deep: true
    }
  },
  //方法集合
  methods: {
    load() {
      console.log("下拉加载", this.id);
      // this.loading = true;
      // this.data = this.searchData.rows;
      // this.totals = this.searchData.total;
      this.loading = true;
      if (this.id == 0) {
        let data = this.condition;
        data.page = this.page + 1;
        data.id = this.zoomId;
        getAccessPagingConditions(data).then(res => {
          this.data = [...this.data, ...res.rows];
          this.page += 1;
          this.totals = res.total;
          this.count = this.count + res.rows.length;
          this.loading = false;
        });
      } else {
        let paramas = { page: this.page, id: this.zoomId };
        getAllRoom(paramas).then(res => {
          this.data = [...this.data, ...res.rows];
          this.page += 1;
          this.totals = res.total;
          this.count = this.count + res.rows.length;
          this.loading = false;
        });
      }
    },
    handleDetail(item) {
      this.$router.push({
        name: "detail",
        query: { roomGuid: item.GUID }
      });
    },
    listClick() {}
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (process.env.NODE_ENV === "production") {
      this.baseUrl = localStorage.getItem("baseUrl");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.infinite-list {
  // height: 90vh;
  height: calc(100vh - 200px);
  padding: 0;
  margin: 0;
  list-style: none;
  .infinite-list-item {
    // background-color: #7dbcfc;
    display: flex;
    align-items: center;
    justify-content: center;
    // height: 120px;
    margin: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
  }
}
.detail {
  overflow: hidden;
}
.content {
  display: flex;
  p {
    width: 100%;
    height: 20px;
    line-height: 15px;
  }
}
.total {
  margin: 10px;
  .count {
    color: #409eff;
  }
}
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>